<template>
	<div class="page-container dealerMgt-container padding-20">
		<div v-if="$route.name === 'dealerMgt'">
			<div class="search-container">
				<el-form :inline="true" ref="form" :model="searchData" size="small">
					<el-form-item label="关键词搜索">
						<el-input v-model="searchData.dealerName" placeholder="经销商名称"></el-input>
					</el-form-item>
					<el-form-item label="状态：">
						<el-select v-model="searchData.status" placeholder="请选择" 
							clearable style="width: 120px">
							<el-option
								v-for="(status, index) in Object.keys(STATUS)"
								:key="index"
								:value="status"
								:label="STATUS[status]"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查询</el-button>
						<el-button @click="onReset">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="bt-area">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="createDealerMgt">新建经销商</el-button>
			</div>
			<div class="table-container">
				<el-table class="el-table-modify" :data="tableData" border>
					<el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
					<el-table-column prop="name" align="center" label="经销商名称"></el-table-column>
					<el-table-column prop="level" label="经销商层级">
						<template slot-scope="scope">{{DealerLevel[scope.row.level]}}</template>
					</el-table-column>
					<el-table-column prop="contact" align="center" label="联系人"></el-table-column>
					<el-table-column prop="phone" align="center" label="联系电话"></el-table-column>
					<el-table-column prop="partnerAmount" align="center" label="团队成员"></el-table-column>
					<el-table-column prop="saleQuantity" align="center" label="权益销售数量"></el-table-column>

					<!-- <el-table-column prop="7" label="佣金比例"></el-table-column> -->

					<el-table-column prop="totalCommission" align="center" label="累计佣金"></el-table-column>

					<el-table-column prop="lastLogin" align="center" label="最近登录时间"></el-table-column>

					<el-table-column prop="status" align="center" label="状态">
						<template slot-scope="scope">
							<span>{{STATUS[scope.row.status]}}</span>
						</template>
					</el-table-column>

					<el-table-column prop="createAt" align="center" label="创建时间"></el-table-column>
					<el-table-column align="center" label="操作" width="200">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="linkToDetail(scope.row)">详情</el-button>
							<el-button type="text" size="small" @click="linkToEdit(scope.row)">修改</el-button>
							<el-button slot="reference" type="text" size="mini" @click="delDealer(scope.row)">删除</el-button>
							<el-button slot="reference" type="text" size="small" @click="resetPassword(scope.row)">重置密码</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					ref="pagination"
					class="mt-20"
					background
					:page-size.sync="pageOption.pageSize"
					:total="pageOption.total"
					@size-change="onSizeChange"
					@current-change="onPageChange"
					layout="slot,->,prev,pager,next,sizes,jumper"
				>
					<span
						class="pagination-title"
					>共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
				</el-pagination>
			</div>
		</div>
		<router-view v-else @refresh="requestData"></router-view>
	</div>
</template>

<script>
import { STATUS, DealerLevel, DealerType } from "@/utils/const";
import { dealerQuery, delDealer, resetPasswordDealer } from "@/api/dealerMgt";

export default {
	name: "DealerMgt",
	data() {
		this.STATUS = STATUS;
		this.DealerLevel = DealerLevel;
		this.DealerType = DealerType;

		return {
			searchData: {
				dealerName: "",
				status: ""
			},
			tableData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			},
			editData: {}
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.searchData.dealerName = "";
			this.searchData.status = "";
			this.requestData();
		},
		async requestData() {
			const { page, pageSize: size } = this.pageOption;
			const postData = {};
			Object.keys(this.searchData).forEach(key => {
				if (this.searchData[key]) {
					postData[key] = this.searchData[key];
				}
			});

			const { data, total } = await dealerQuery({
				page: page - 1,
				size,
				...postData
			});
			this.tableData = data || [];
			this.pageOption.total = total || 0;
			this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

			if (this.$refs.pagination) {
				let childrenRefs = this.$refs.pagination.$children;
				this.$nextTick(() => {
					childrenRefs.forEach(child => child.$forceUpdate());
				});
			}
		},
		onSizeChange(size) {
			this.pageOption.pageSize = size;
			this.requestData();
		},
		onPageChange(page) {
			this.pageOption.page = page;
			this.requestData();
		},
		createDealerMgt() {
			//新建经销商
			this.$router.push({name: 'addDealer'});
		},
		linkToDetail(row) {
			this.$router.push({ name: "dealerDetail", params: { id: row.id } });
		},
		linkToEdit(row) {
			this.$router.push({ name: "editDealer", params: {id: row.id}});
		},
		async delDealer(row) {
			try {
				this.$confirm('确定要删除吗？', {
        	type: 'warning',
					callback: async (action) => {
						if (action == 'confirm') {
							await delDealer(row.id);
							this.requestData();
						}
					}
				});
			} catch (error) {
				console.log(error);
			}
		},
		async resetPassword(row) {
			try {
				this.$confirm('重置密码后密码变为123456，确认重置密码？', {
        	type: 'warning',
					callback: async (action) => {
						if (action == 'confirm') {
							await resetPasswordDealer(row.id);
							this.$message.success('重置密码成功');
						}
					}
				});
			} catch (error) {
				console.log(error);
			}
		}
	},
	created() {
		this.requestData();
	}
};
</script>



<style lang="scss" scoped>
.dealerMgt-container {
	.bt-area {
		margin-bottom: 18px;
	}
	.pagination-title {
		font-weight: normal;
	}
}
</style>
